<template>
  <div class="main">
    <el-dialog title="添加监控当前价格" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="formInAddDialog" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="formInAddDialog.name"></el-input>
        </el-form-item>
        <el-form-item label="交易类型">
          <el-radio-group v-model="formInAddDialog.transactionType">
            <el-radio :label="1">股票</el-radio>
            <el-radio :label="3">期货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="code">
          <el-input v-model="formInAddDialog.code"></el-input>
        </el-form-item>
        <el-form-item label="比较方法">
          <el-radio-group v-model="formInAddDialog.comparison">
            <el-radio :label="1">大于等于</el-radio>
            <el-radio :label="2">小于等于</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="监控价格">
          <el-input v-model="formInAddDialog.monitorPrice"></el-input>
        </el-form-item>
        <el-form-item label="是否可用">
          <el-switch v-model="formInAddDialog.available" active-text="可用" inactive-text="不可用">
          </el-switch>
        </el-form-item>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitAdd" v-loading.fullscreen.lock="fullScreenLoading">确
          定</el-button>
      </el-form>
    </el-dialog>
    <el-row>
      <el-form :model="formInSearch" label-width="80px">
        <el-col :span="5">
          <el-form-item label="名称">
            <el-input v-model="formInSearch.name" placeholder="名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="代码">
            <el-input v-model="formInSearch.code" placeholder="代码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交易类型">
            <el-radio-group v-model="formInSearch.transactionType">
              <el-radio :label="-1">全部</el-radio>
              <el-radio :label="1">股票</el-radio>
              <el-radio :label="3">期货</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-switch v-model="formInSearch.available" active-text="可用" inactive-text="不可用">
          </el-switch>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="handleShowAddDialog">添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="monitorCurrentPriceData" border style="width: 100%">
        <el-table-column prop="Name" label="名称" width="140"> </el-table-column>
        <el-table-column prop="TransactionType" label="交易类型" width="100"> </el-table-column>
        <el-table-column prop="Code" label="代码" width="150"> </el-table-column>
        <el-table-column prop="Comparison" label="比较方法" width="150"> </el-table-column>
        <el-table-column prop="MonitorPrice" label="当前监控的价格" width="120"> </el-table-column>
        <el-table-column prop="Available" label="是否可用" width="120"> </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleStopMonitorCurrentPrice(scope.row)" type="text" size="small">结束</el-button>
            <el-button @click="handleDeleteMonitorCurrentPrice(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="paging.pageNo"
        :page-size="paging.pageSize" :page-sizes="paging.pageSizes" :total="paging.pageTotal"
        @size-change="handleSizeChange" @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { page, add, stopMonitorCurrentPrice, deleteMonitorCurrentPrice } from "@/api/monitor_current_price_api.js";
export default {
  name: "MonitorCurrentPrice",
  data() {
    return {
      /**
       * 是否显示对话框
       */
      dialogVisible: false,
      /**
       * 是否全屏loading
       */
      fullScreenLoading: false,
      /**
       * 表单参数
       */
      formInAddDialog: {
        /**
         * 名称
         */
        name: null,
        /**
         * 交易类型
         */
        transactionType: 0,
        /**
         * 股票/期货代码
         */
        code: null,
        /**
         * 比较方法
         */
        comparison: 0,
        /**
         * 当前价格
         */
        monitorPrice: 0,
        /**
         * 是否可用
         */
        available: true,
      },
      /**
       * 表格的数据
       */
      monitorCurrentPriceData: [],
      /**
       * 表格搜索
       */
      formInSearch: {
        /**
         * 名称
         */
        name: null,
        /**
         * 代码
         */
        code: null,
        /**
         * 交易类型
         */
        transactionType: -1,
        /**
         * 是否可用
         */
        available: true,
      },
      /**
       * 分页显示
       */
      paging: {
        /**
         * 第几页
         */
        pageNo: 1,
        /**
         * 每页有几行
         */
        pageSize: 5,
        /**
         * 总记录数
         */
        pageTotal: 0,
        /**
         * 页码类型
         */
        pageSizes: [5, 10, 20, 30]
      },
    };
  },
  mounted() {
    this.handleSearch();
  },
  methods: {
    /**
     * 显示添加训练记录的对话框
     */
    handleShowAddDialog() {
      this.dialogVisible = true;
    },
    /**
     * 添加记录
     */
    handleSubmitAdd() {
      let param = { ...this.formInAddDialog };
      param.available = this.formInAddDialog.available == true ? 1 : -1;
      param.monitorPrice = Number(param.monitorPrice);

      this.fullScreenLoading = true;
      let that = this;

      add(param).then((res) => {
        that.fullScreenLoading = false;
        if (res.data.Success == true) {
          that.fullScreenLoading = false;
          that.handleSearch();
          that.dialogVisible = false;
        } else {
          console.error(`调用接口/api/v1/monitorCurrentPrice/add报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 搜索
     */
    handleSearch() {
      this.fullScreenLoading = true;
      let that = this;
      page({
        transactionType: this.formInSearch.transactionType,
        name: this.formInSearch.name,
        code: this.formInSearch.code,
        available: this.formInSearch.available == true ? 1 : -1,
        pageNo: this.paging.pageNo,
        pageSize: this.paging.pageSize,
      }).then((res) => {
        that.fullScreenLoading = false;
        if (res.data.Success == true) {
          that.monitorCurrentPriceData = res.data.Result.Data;
          that.paging.pageTotal = res.data.Result.Total;
        } else {
          console.error(`调用接口/api/v1/monitorCurrentPrice/page报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 重置
     * @param formInSearch 
     */
    handleReset() {
      this.formInSearch.available = true;
      this.formInSearch.code = null;
      this.formInSearch.name = null;
      this.formInSearch.transactionType = -1;
    },
    /**
     * 结束
     */
    handleStopMonitorCurrentPrice(row) {
      stopMonitorCurrentPrice(row.ID).then((res) => {
        if (res.data.Success == true) {
          this.handleSearch();
        } else {
          console.error(`调用接口/api/v1/monitorCurrentPrice/stopMonitorCurrentPrice/:id报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 删除
     */
    handleDeleteMonitorCurrentPrice(row) {
      deleteMonitorCurrentPrice(row.ID).then((res) => {
        if (res.data.Success == true) {
          this.handleSearch();
        } else {
          console.error(`调用接口/api/v1/monitorCurrentPrice/deleteMonitorCurrentPrice/:id报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 点击下一页时
     * @param currentPage 
     */
    handlePageChange(currentPage) {
      this.paging.pageNo = currentPage
      this.handleSearch();
    },
    /**
     * 每一页的行数变化时
     * @param pageSize 
     */
    handleSizeChange(pageSize) {
      this.paging.pageSize = pageSize
      this.handleSearch();
    }
  },
};
</script>

<style scoped>
.main {
  /* background-color: #e9eef3; */
  background-color: white;
}</style>
